<template>
  <div
    v-if="active != 3"
    :class="unStatus === false ? 'tzy-selected-pop' : 'tzy-selected-popTabs'"
  >
    <div class="tzy-selected-pop__left" @click="unfoldChange">
      <div class="tzy-selected-pop__left-info">
        <el-icon
          v-if="unStatus === false"
          color="#fff"
          style="margin-left: 14px"
        >
          <DArrowLeft />
        </el-icon>
        <el-icon v-else color="#fff" style="margin-left: 14px">
          <DArrowRight />
        </el-icon>
        <div class="tzy-selected-pop__text">
          {{ unStatus ? '收起对比' : '展开对比' }}
        </div>
        <div class="tzy-selected-pop__num">
          {{ store.getters.searchCollege.selectedCollege.length }}
        </div>
      </div>
    </div>
    <div class="tzy-selected-pop__content-right">
      <el-popover
        placement="right-start"
        width="360"
        trigger="click"
        :visible="popperVis"
        popper-class="popoverStyle"
      >
        <template #reference>
          <el-input
            @clear="handleIptClear"
            @focus="handleIptFocus"
            @blur="handleIptBlur"
            @keyup.enter="handleSearchSchool"
            :prefix-icon="Search"
            v-model="searchSchooleReques.search"
            clearable
            style="max-width: 600px"
            placeholder="搜索院校"
            class="height40"
          >
          </el-input>
        </template>
        <div class="curr">
          <div
            @click="handleLikeSave(item)"
            class="his-item"
            v-for="item in searchCollegeDataPop"
            :key="item.code"
          >
            {{ item.cnName }}
          </div>
        </div>
      </el-popover>

      <div class="tzy-content-list margintop" style="width: 100%">
        <el-checkbox-group
          v-model="collegeCheckList"
          class="checkbox-box"
          :max="6"
        >
          <div
            class="f20"
            style="width: 100%; border-bottom: 1px solid #e9e7e7"
            v-for="(item, index) in store.getters.searchCollege.selectedCollege"
            :key="item.code"
          >
            <el-checkbox :label="item.code" :value="item.code" size="large">
              <template #default>
                <div class="df" style="justify-content: space-between">
                  <div>{{ item.cnName }}</div>
                  <div @click.stop="handleDelete(item, index)">
                    <el-icon><CloseBold /></el-icon>
                  </div>
                </div>
              </template>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <div style="width: 100%; margin-bottom: 20px">
        <span class="f14">查看</span>&nbsp;<span
          class="f12 curr"
          style="color: var(--color-text); text-decoration: underline"
          @click="handleGoContrastTable"
          >全部院校对比</span
        >
      </div>
      <el-button
        @click="handleContrast"
        type="primary"
        class="height40"
        style="width: 100%; background-color: var(--background-color)"
        >开始对比（以选择{{ collegeCheckList.length }}/6）</el-button
      >
    </div>
  </div>
</template>
<script setup>
import _ from 'lodash';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import {
  getLikeList,
  getLikeSave,
  getSearchSchool,
} from '@/api/searchColleges/searchCollege';

import { onMounted, ref, computed } from 'vue';
import bus from '../../../../utils/bus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const searchCollegeDataPop = ref([]);
const popperVis = ref(false);
const emits = defineEmits(['handleGoContrastTable']);
const { active } = defineProps({
  active: {
    type: String,
    default: '1',
  },
});
const route = useRouter();
const store = useStore();
const saveContrast = ref({
  detail: '1',
  type: 'compare',
});
const collegeCheckList = ref([]);
const saveLikeSave = ref({
  type: 'compare',
  targetid: '',
  operate: 'del',
});
const searchSchooleReques = ref({
  page: 1,
  pageSize: 10,
  search: '',
});
const unStatus = ref(false);
const selectedCollegeData = computed(
  () => store.getters.searchCollege.selectedCollege,
);
const handleLikeSave = (item) => {
  console.log(item, 'itemitem');
  console.log(selectedCollegeData.value, 'selectedCollegeData');
  let index = selectedCollegeData.value.findIndex((v) => v.code == item.code);
  if (index !== -1) {
    ElMessage.error('该院校已加入对比');
  } else {
    delete saveLikeSave.value.operate;
    saveLikeSave.value.targetid = item.code;
    selectedCollegeData.value.push(item);
    fetchLikeSave();
    store.dispatch('searchCollege/setCollegeLike', selectedCollegeData.value);
  }
};
const unfoldChange = () => {
  unStatus.value = !unStatus.value;
};
const handleSearchSchool = () => {
  fetchSearchSchool();
};

const handleIptClear = () => {
  searchCollegeDataPop.value = [];
  popperVis.value = false;
};

const handleIptFocus = () => {
  if (searchCollegeDataPop.value.length > 0) {
    popperVis.value = true;
  }
};
const handleIptBlur = () => {
  popperVis.value = false;
};
// 找院校接口
const fetchSearchSchool = () => {
  getSearchSchool(searchSchooleReques.value).then((res) => {
    if (res.data.code == 20000) {
      searchCollegeDataPop.value = res.data.data;
      popperVis.value = true;
    }
  });
};
const handleDelete = (item, index) => {
  collegeCheckList.value = collegeCheckList.value.filter(
    (code) => code !== item.code,
  );
  store.dispatch('searchCollege/removeCollegeList', index);
  saveLikeSave.value.targetid = item.code;
  saveLikeSave.value.operate = 'del';
  fetchLikeSave();
};
bus.on('changeIsShow', (isShow) => {
  unStatus.value = isShow;
});
bus.on('handleLikeList', (code) => {
  saveLikeSave.value.targetid = code;
  fetchLikeSave();
});
const handleGoContrastTable = () => {
  emits('handleGoContrastTable', '3');
};
// 开始对比
const handleContrast = () => {
  if (collegeCheckList.value.length < 2) {
    ElMessage({
      message: '请选择至少两个院校',
      type: 'warning',
    });
    return;
  } else {
    let foundItems = store.getters.searchCollege.selectedCollege.filter(
      (item) => collegeCheckList.value.includes(item.code),
    );
    let checkedCollList = [];
    foundItems.forEach((v) => {
      checkedCollList.push(v.code);
    });
    localStorage.setItem('checkedCollege', JSON.stringify(checkedCollList));
    localStorage.setItem('compareList', JSON.stringify(foundItems));
    route.push('/collegeCompare');
  }
};
// 删除对比小弹窗里面的一项
const fetchLikeSave = () => {
  getLikeSave(saveLikeSave.value).then((res) => {
    if (res.data.code == 20000) {
      fetchLikeList();
    }
  });
};
// 对比接口
const fetchLikeList = () => {
  getLikeList(saveContrast.value).then((res) => {
    if (res.data.code == 20000) {
      store.dispatch(
        'searchCollege/setCollegeLike',
        res.data.data.compareDetail,
      );
    }
  });
};
onMounted(() => {
  fetchLikeList();
});
</script>
<style lang="scss" scoped>
.checkbox-box {
  display: flex;
  flex-direction: column;
}
.tzy-selected-popTabs {
  right: 0;
  position: fixed;
  top: 64px;
  width: 400px;
  height: 200px;
  z-index: 2000;
  transform: translateX(0px);
  transition: transform 0.8s;
  display: flex;

  .tzy-selected-pop__content-right {
    flex: 1;
    background: #fff;
    border-radius: 0 0 0 4px;
    padding: 20px;
    overflow: hidden;
    box-shadow: -10px 0 10px 0 rgba(0, 0, 0, 0.05);
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .tzy-content-list {
      flex: 1;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      .tzy-contetn-list-date {
        background: #f7f8fa;
        border-radius: 4px 4px 4px 4px;
        padding: 12px 16px;
        margin-bottom: 10px;

        .tzy-contetn-name {
          display: inline-block;
          padding-right: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #4e5969;
          line-height: 20px;

          .sizeName {
            color: #212121;
          }
        }

        .tzy-content-number {
          text-align: center;
          background-color: #f53f3f;
          color: #ffffff;
          width: 23px;
          height: 22px;
          line-height: 22px;
          border-radius: 4px;
        }

        .tzy-content-name {
          margin-left: 12px;
        }
      }
    }
  }

  .tzy-selected-pop__left {
    width: 48px;
    height: 246px;
    cursor: pointer;
    position: absolute;
    left: -48px;
    top: 106px;

    .uzy-button {
      width: 48px;
      height: 42px;
      font-size: 16px;
      font-weight: 400;
      line-height: 42px;
      background-color: #ffffff;
      text-align: center;
      color: var(--text-color);
      border: 1px solid var(--text-color);
    }

    .tzy-selected-pop__left-info {
      // height: 100px;
      padding-top: 16px;
      border: 1px solid transparent;
      border-right: none;
      border-top-left-radius: 4px;
      background: var(--background-color);

      .tzy-selected-pop__text {
        width: 16px;
        height: 100px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        margin: 0 auto;
        line-height: 22px;
        margin-bottom: 8px;
      }

      .tzy-selected-pop__num {
        text-align: center;
        font-size: 24px;
        font-family:
          PingFang SC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: #fff;
        line-height: 24px;
        margin-bottom: 16px;
      }
    }
  }
}

.tzy-selected-pop {
  right: 10px;
  position: fixed;
  top: 64px;
  width: 390px;
  height: 200px;
  z-index: 2000;
  transform: translateX(400px);
  transition: transform 0.8s;
  display: flex;

  .tzy-selected-pop__content-right {
    flex: 1;
    background: #fff;
    border-radius: 0 0 0 4px;
    padding: 20px;
    overflow: hidden;
    box-shadow: -10px 0 10px 0 rgba(0, 0, 0, 0.05);
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .tzy-content-list {
      flex: 1;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;

      .tzy-contetn-list-date {
        background: #f7f8fa;
        border-radius: 4px 4px 4px 4px;
        padding: 12px 16px;
        margin-bottom: 10px;

        .tzy-contetn-name {
          display: inline-block;
          padding-right: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #4e5969;
          line-height: 20px;

          .sizeName {
            color: #212121;
          }
        }

        .tzy-content-number {
          text-align: center;
          background-color: #f53f3f;
          color: #ffffff;
          width: 23px;
          height: 22px;
          line-height: 22px;
          border-radius: 4px;
        }

        .tzy-content-name {
          margin-left: 12px;
        }
      }
    }
  }

  .tzy-selected-pop__left {
    width: 48px;
    height: 246px;
    cursor: pointer;
    position: absolute;
    left: -48px;
    top: 106px;

    .uzy-button {
      width: 48px;
      height: 42px;
      font-size: 16px;
      font-weight: 400;
      line-height: 42px;
      background-color: #ffffff;
      text-align: center;
      color: var(--text-color);
      border: 1px solid var(--text-color);
    }

    .tzy-selected-pop__left-info {
      // height: 100px;
      padding-top: 16px;
      border: 1px solid transparent;
      border-right: none;
      border-top-left-radius: 4px;
      background: var(--background-color);

      .tzy-selected-pop__text {
        width: 16px;
        height: 100px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        margin: 0 auto;
        line-height: 22px;
        margin-bottom: 8px;
      }

      .tzy-selected-pop__num {
        text-align: center;
        font-size: 24px;
        font-family:
          PingFang SC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: #fff;
        line-height: 24px;
        margin-bottom: 16px;
      }
    }
  }
}
.his-item {
  padding: 5px 0 5px 25px;
  margin: 10px 0;
  &:hover {
    background: #f3f6f9;
  }
}
:deep(.el-checkbox) {
  width: 100%;
  height: 70px;
}
:deep(.el-checkbox__label) {
  width: 100%;
}
</style>
<style lang="scss">
.el-popover.popoverStyle {
  padding: 0 0 !important;
  // left: 350px !important;
}
</style>
